<!DOCTYPE html>
<html>

	<head lang="en">
		<title>攻略文章</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/strategyDetails.css" />
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/common.js"></script>
		<script>
			$(function () {
				var detailId = getParams().id;
				var userStr = sessionStorage.getItem('user');
				var like;
				var likeNum;
				$.get(baseUrl+'/strategyDetails/'+detailId,function (data) {
					$('.detail').renderValues(data);
					//设置点赞数
					likeNum = data.likeNum;
					//是否点过赞
					like = data.like+'';
					if (like=='true'){
						$('#likeBtn').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up').attr('style',"color: #00bbd3");
					}
				})
				//点击评论图标按钮跳转到官方攻略文章的评论页面
				$("#commentBtn").click(function(){
					window.location.href="/mine/strategyDetailComment.html?id="+ detailId +"";
				});

				//点赞和取消
				$("#likeBtn").click(function () {
					if (like=='true'){
						like = 'false';
						$('#likeBtn').removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up').attr('style',"color: black");
						$('#likeBtn').html(--likeNum);
						$.ajax({
							type: "delete",
							url: baseUrl+'/users/cancelLike/'+detailId+'/'+4,//type: 1.游记;2.大攻略;3.日报;4.攻略文章
							success: function () {
								$(document).dialog({
									type: 'notice',
									infoText: '已取消',
									autoClose: 1000,
									position: 'center'  // center: 居中; bottom: 底部
								});
							}
						})
					}else {
						like = 'true';
						$('#likeBtn').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up').attr('style',"color: #00bbd3");
						$('#likeBtn').html(++likeNum);
						$.ajax({
							type: "post",
							url: baseUrl+'/users/like/'+detailId+'/'+4,//type: 1.游记;2.大攻略;3.日报;4.攻略文章
							// data: {
							//     travelId:travelId,
							//     type:1
							// },
							success: function () {
								$(document).dialog({
									type: 'notice',
									infoText: '谢谢点赞!',
									autoClose: 1000,
									position: 'center'  // center: 居中; bottom: 底部
								});
							}
						})
					}
				});

				//点击查看用户
				$("#followBtn").click(function () {
					var userId = $("#followBtn").attr("data-id");
					window.location.href = "userProfiles.html?id=" + userId;
				})

				//查询当前用户是否对该攻略文章有收藏
				$.get(baseUrl + "/users/strategyDetailCollection/" + detailId, function (data) {
					if (data.success) {
						//清除样式,添加样式
						$("#collectBtn").removeClass('fa-star-o').addClass('fa-star');
						$("#collectBtn").attr("data-collection", "1");
					} else {
						$("#collectBtn").attr("data-collection", "0");
					}
				})

				//点击收藏改变样子,发送请求
				$("#collectBtn").click(function () {
					//判断是否登录
					if (!userStr) {
						$(document).dialog({
							type: 'confirm',
							closeBtnShow: true,
							content: '你还没登录,立刻登录?',
							onClickConfirmBtn: function () {
								window.location.href = '/login.html';
							},
							onClickCancelBtn: function () {
								//改变样式
								$("#likeBtn").removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
							}
						})
						return;
					}
					//获的当前的样式
					var collection = $("#collectBtn").attr("data-collection");
					if (collection == 1) {
						//改变样式
						$("#collectBtn").removeClass('fa-star').addClass('fa-star-o');
						//修改collection的值
						$("#collectBtn").attr("data-collection", "0");
						//取消收藏
						$.ajax({
							url: baseUrl + '/users/changeStrategyDetailCollection/' + detailId,
							data: {type: "0"},
							method: "put",
							success: function () {
								$(document).dialog({
									type: 'notice',
									infoText: '已取消收藏',
									autoClose: 1000,
									position: 'center'  // center: 居中; bottom: 底部
								});
							}
						})

					} else {
						//改变样式
						$("#collectBtn").removeClass('fa-star-o').addClass('fa-star');
						//修改collection的值
						$("#collectBtn").attr("data-collection", "1");
						//添加收藏
						$.ajax({
							url: baseUrl + '/users/changeStrategyDetailCollection/' + detailId,
							data: {type: "1"},
							method: "put",
							success: function () {
								$(document).dialog({
									type: 'notice',
									infoText: '已添加收藏',
									autoClose: 1000,
									position: 'center'  // center: 居中; bottom: 底部
								});
							}
						})

					}

				})

			});
		</script>
	</head>

	<body>

	<div class=" nav-search">
		<a href="javascript:history.go(-1);">
			<span><i class="fa fa-chevron-left"></i></span>
		</a>
	</div>
	<hr>

	<div class="container detail">
		<h4 class="title" ><strong render-html="title" >广州早茶必点什么？</strong></h4>
		<img class="head-img" render-src="coverUrl">
		<div class="author">By <span ></span></div>
		<div class="content" render-html="strategyContent.content" >

		</div>
		<div class="container d-flex">
			<div class="p-2  flex-fill">
				<i class="fa fa-thumbs-o-up" id="likeBtn" render-html="likeNum"> </i>
			</div>
			<div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn" render-html="commentNum"> </i>
			</div>
			<div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"  data-collection=""> </i>
			</div>
		</div>
	</div>
	<hr>

	</body>

</html>